<template>
  <div class="shadow">
    <MyHeader @parentexportexcel="parentexportexcel" />
    <MySearch @searchfunparent="searchfunparent" />
    <MyShow />
    <MyTable :arry="arry"  />
    <MyPage :page="page" :pageSize="pageSize" :pageSizes="pageSizes" :total="total" @changepagesize="changepagesize" @changepage="changepage" />
    <MyDialog :row="row" />
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue';
import MySearch from './components/MySearch.vue';
import MyShow from './components/MyShow.vue';
import MyTable from './components/MyTable.vue';
import MyPage from './components/MyPage.vue';
import MyDialog from './components/MyDialog.vue';
import { getstatisApi } from '../../api/statisticsApi'
import { export_json_to_excel } from '../../utils/Export2Excel'
export default {
  components: {
    MyHeader,
    MySearch,
    MyShow,
    MyTable,
    MyPage,
    MyDialog
  },
  data () {
    return {
      row: {},//获取一行数据
      arry: [],
      keyword: '',//关键关键字
      page: 1,//当前页码
      pageSize: 10,//每页多少条
      pageSizes: [10, 20, 50, 80],//与pageSize成套使用
      total: 0,//总条数
    }
  },
  mounted () {
    this.statis()
  },
  methods: {
    statis () {
      getstatisApi({ keyword: this.keyword, page: this.page, pageSize: this.pageSize }).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.arry = res.data
          this.total = res.total
        }
      })
    },
    searchfunparent (val) {//查询调用方法  val是关键字
      this.keyword = val
      this.statis()
    },
    changepagesize (val) {//调用分页，控制pageSize切换
      this.pageSize = val
      this.statis()
    },
    changepage (val) {//控制当前页
      this.page = val
      this.statis()
    },
    parentexportexcel () {//导出表
      const tHeader = ['订单状态', '订单类型', '订单编号', '姓名', '科室', '医生', '优惠(元)', '应收(元)', '实收(元)', '医保(元)', '会员卡(元)', '现金(元)', '支付宝(元)', '微信(元)', '银行卡(元)', '收费日期', '收费员']
      const filterVal = ['nowshow', 'type', 'number', 'username', 'hourse', 'doctor', 'pianyi', 'income', 'nowincome', 'yibao', 'ip', 'money', 'zhifubao', 'payv', 'payy', 'incomedate', 'user']
      getstatisApi({ keyword: '', page: 1, pageSize: 1000 }).then(res => {
        if (res.code == 200) {
          const data = this.formatJson(filterVal, res.data)
          export_json_to_excel({
            data,
            header: tHeader,//excel头部列表
            filename: '测试文件',
            autoWidth: true,//自适应宽高
            bookType: 'xlsx'//文件类型
          })
        }
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    },
  }
};
</script>

<style lang="less" scoped>
.shadow {
  background-color: #fff;
  border-radius: 15px;
}
</style>